<template>
    <BasicModal v-bind="$attrs" @register="registerModal" :title="displayModuleTitle" @ok="onButtonOkClick"
        :body-style="bodyStyle" width="800px">
        <BasicForm @register="registerForm" />
    </BasicModal>
</template>
<script lang="ts">
import { defineComponent, ref, unref, computed } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';

import { addOrUpdateItemFormSchema } from './param.data';
import { getItem, addItem, updateItem, queryGroup, getAllTypeSelect } from '/@/api/platform/param';

import { useMessage } from '/@/hooks/web/useMessage';
import { OperationTypeEnum } from '/@/enums/appEnum';
import { QcUnifyTransToChildProps } from '/#/QcUnify';
import { displayTitle } from '/@/utils/QcUnifyUtil';
import { group } from 'console';

const { createMessage } = useMessage();


export default defineComponent({
    name: 'AddOrUpdateParamItem',
    components: { BasicModal, BasicForm },
    emits: ['success', 'register'],
    setup(_, { emit }) {
        //弹出窗口界面是新增数据、修改数据；根据传递过来的参数进行判断
        const operateType = ref(OperationTypeEnum.UN_KNOWN);
        const qcUnifyProps = ref<QcUnifyTransToChildProps>();
        const dataId = ref('');
        //接收选中的组code
        const groupcode = ref('');
        const bodyStyle = {
            height: '450px',
        };

        const [
            registerForm,
            { setFieldsValue, resetFields, validate, updateSchema },
        ] = useForm({
            labelWidth: 120,
            schemas: addOrUpdateItemFormSchema,
            showActionButtonGroup: false,
            actionColOptions: {
                span: 24,
            },
        });

        /**
         * 根据父组件传递过来的参数获取对应的操作，操作不同所对应的界面不同
         */
        const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
            if (data != undefined && data != null) {
                let unrefData = unref(data);
                qcUnifyProps.value = unrefData;
                //接收父组件传递的数据
                if (unrefData?.operateType) {
                    //判断是否传入op属性
                    operateType.value = unrefData.operateType;
                }
                if (unrefData?.dataId) {
                    dataId.value = unrefData.dataId;
                }
                groupcode.value = '';
                if (unrefData?.groupcode) {
                    groupcode.value = unrefData.groupcode;
                }
            }
            resetFields(); //重置表单
            setModalProps({ confirmLoading: false });
            // getProjectValidDepts();
            getAllGroup();
            getAllType();
            // 如果是修改数据，根据传入的id获取数据后进行赋值
            if (operateType.value == OperationTypeEnum.EDIT) {
                getItemById();
            } else {
                //新增的话,默认选择当前参数组
                setFieldsValue({
                    groupcode: groupcode.value
                })
            }
        });

        let displayModuleTitle = computed(() => {
            return displayTitle(qcUnifyProps.value);
        });

        async function getItemById() {
            getItem(dataId.value)
                .then((res) => {
                    console.log('res', res);
                    setFieldsValue({
                        ...res,
                    });
                })
                .catch((ex) => {
                    console.log('catch ', ex);
                    createMessage.error(ex.msg);
                });
        }
        // 获取全部分组
        function getAllGroup() {
            queryGroup({}).then((res) => {
                let Options = [];
                for (let d of res) {
                    Options.push({ value: d.code, label: d.code });
                }

                updateSchema({
                    field: 'groupcode',
                    componentProps: {
                        options: Options,
                    },
                });
            })
        }
        // 获取全部参数类型
        function getAllType() {
            getAllTypeSelect().then((res) => {
                let Options = [];
                for (let d of res.datatypeOptions) {
                    // 这里要转number类型,因为获取全部参数类型请求回来的数据key为string,而其他接口为Number
                    Options.push({ value: Number(d.key), label: d.value });
                }

                updateSchema({
                    field: 'datatype',
                    componentProps: {
                        options: Options,
                    },
                });
            })
        }
        /**
         * 点击确认按钮，根据不同的op调用对应方法保存信息
         */
        async function onButtonOkClick() {
            const values = await validate();
            setModalProps({ confirmLoading: true });
            groupcode.value = values.groupcode;
            //根据指定的操作类型分别进行提交数据和处理
            if (operateType.value == OperationTypeEnum.ADD) {
                //对应操作的步骤为：验证表单、提交后台保存、关闭modal、调用父组件事件刷新数据
                try {
                    //调用接口进行保存
                    addItem(values)
                        .then((res) => {
                            if (!res || Object.keys(res).length == 0) {
                                createMessage.success('保存成功。', 2);
                            }
                            opSuccess();
                        })
                        .catch((ex) => {
                            console.log('catch ', ex);
                            createMessage.error(ex.msg);
                        });
                } finally {
                    setModalProps({ confirmLoading: false });
                }
            } else if (operateType.value == OperationTypeEnum.EDIT) {
                //调用接口进行保存
                updateItem(values)
                    .then((res) => {
                        if (!res || Object.keys(res).length == 0) {
                            createMessage.success('修改成功。', 2);
                        }
                        opSuccess();
                    })
                    .catch((ex) => {
                        console.log('catch ', ex);
                        // createMessage.error(ex.msg);
                    });
            } else {
                createMessage.error('当前操作类型错误，无法进行对应操作。', 5);
            }
        }

        //操作成功后
        function opSuccess() {
            closeModal();
            emit('success', groupcode.value);
        }

        return {
            operateType,
            displayModuleTitle,
            registerModal,
            registerForm,
            getAllGroup,
            getAllType,
            getItemById,
            onButtonOkClick,
            opSuccess,
            // getProjectValidDepts,
            bodyStyle,
        };
    },
});
</script>
